<template>
  <a-modal
    title="委托任务"
    :visible="visible"
    :dialog-style="{ top: '20px' }"
    :confirm-loading="loading"
    width="1000px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-row>
        <a-form-model-item ref="assignee" label="处理人" prop="assignee">
          <a-transfer
            v-model="form.assignee"
            show-search
            :data-source="selectUsers"
            :list-style="{
              width: '45%',
              height: '300px',
            }"
            :target-keys="selectUserIds"
            :render="renderItem"
            @change="handleChange"
            @dblclick.right="handleChange"
          />
        </a-form-model-item>
      </a-row>
      <a-row>
        <a-form-model-item ref="comment" label="转办说明" prop="comment">
          <a-textarea
            placeholder="请填写转办说明"
            class="custom"
            v-model="form.comment"
            style="width: 95%"
            allow-clear
            :rows="4"
          />
        </a-form-model-item>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import { selectUserList } from '@/api/system/user'
import { mapGetters } from 'vuex'

export default {
  name: 'TurnToDoTask',
  components: {},
  props: {
    // 节点信息
    taskNode: {
      type: Object,
      require: true
    },
    submitType: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      // 显示弹框
      visible: false,
      // 遮罩
      loading: false,
      // 可选人
      selectUsers: [],
      // 选中人
      selectUserIds: [],
      form: {
        comment: undefined,
        targetKey: undefined,
        assignee: undefined,
        isEndNode: undefined,
        multiInstance: undefined,
        bizId: undefined,
        instanceId: undefined,
        taskId: undefined,
        userId: undefined,
        submitType: undefined
      },
      rules: {
        assignee: [{ required: true, message: '任务审批人不能为空', trigger: 'change' }],
        comment: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    taskNode: function (val) {
      if (!!val && !!this.submitType && this.submitType === 'T') {
        this.rest()
        // 初始化下一节点
        this.loadSelectUsers()
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'deptId'])
  },
  methods: {
    // 搜索可选人
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 加载用户信息
    loadSelectUsers () {
      const param = { 'deptId': this.deptId, 'orgFilterType': '2' }
      selectUserList(param).then(res => {
        const userList = []
        res.data.forEach(e => {
          const data = {
            key: e.userId,
            title: e.nickName,
            description: e.deptFullName
          }
          if (e.userId !== this.userId) {
            userList.push(data)
          }
        })
        this.selectUsers = userList
      })
    },
    // 自定义显示内容
    renderItem (item) {
      const customLabel = (
        <span class='custom-item'>
          {item.title} - {item.description}
        </span>
      )
      return {
        label: customLabel,
        value: item.title
      }
    },
    // 选择
    handleChange (targetKeys, direction, moveKeys) {
      if (this.form.multiInstance === 'Y') {
        this.selectUserIds = targetKeys
      } else {
        if (direction === 'left') {
          this.selectUserIds = []
        } else {
          this.selectUserIds = moveKeys
        }
      }
      this.form.assignee = this.selectUserIds
    },
    // 显示弹框
    show () {
      this.visible = true
    },
    rest () {
      this.form = {
        comment: undefined,
        targetKey: this.taskNode.nodeKey,
        assignee: undefined,
        isEndNode: this.taskNode.isEndNode,
        multiInstance: this.taskNode.multiInstance,
        bizId: this.taskNode.bizId,
        instanceId: this.taskNode.instanceId,
        taskId: this.taskNode.taskId,
        userId: this.userId,
        submitType: 'T'
      }
      this.selectUsers = []
      this.selectUserIds = []
    },
    // 处理任务
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submitOk', this.form)
        }
      })
    },
    // 关闭弹框
    handleCancel () {
      this.visible = false
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>,
